<template>
  <div class="ck-filter-form" :style="{ height: containerHeight }">
    <div ref="input-container" class="form-item-container">
      <template v-for="(item, index) in elements">
        <div :key="index" class="form-item">
          <div v-if="item.label" class="form-item-label">{{ item.label }}：</div>
          <component
            :is="'el-' + item.type"
            v-model.trim="eleParms[index].value"
            :style="'width:' + (item.width || 130) + 'px'"
            size="mini"
            :placeholder="item.placeholder?(item.tpe==='select'?'请选择':'请输入')+item.placeholder:(item.tpe==='select'?'请选择':'请输入')+item.label"
            :type="item.mode"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :format="item.format || 'yyyy-MM-dd'"
            :value-format="item.format || 'yyyy-MM-dd'"
            range-separator="至"
            :filterable="elements[index].filterable"
            :remote="elements[index].remote"
            :remote-method="elements[index].remoteMethod"
            :clearable="elements[index].clearable"
            :multiple="item.multiple || false"
            :collapse-tags="item.collapseTags || false"
            :picker-options="item.expiredDate || handleExpireTime"
            @change="
              handleChangeSelect(eleParms[index].value, elements[index].change)
            "
          >
            <el-option
              v-for="opt in item.options"
              :key="opt[elements[index].itemValue] || opt.value"
              :label="opt[elements[index].itemLabel] || opt.label"
              :value="opt[elements[index].itemValue] || opt.value"
            />
          </component>
        </div>
      </template>
    </div>
    <div class="right-btn-container">
      <Button v-if="showSubmitBtn" icon="search" @click="submitFormFilter">查询</Button>
      <Button v-if="showResetBtn || showReset" icon="reset" type="info" @click="reset">重置</Button>
      <slot />
      <div>
        <div
          v-show="showCloseAndOpen"
          class="more-text"
          @click="openAndCloseFilterForm"
        >{{ openOrCloseText }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CkForm',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    elements: Array,
    noreset: Boolean,
    noimmediate: Boolean,
    hand: Boolean,
    showReset: Boolean,
    hasResetCb: Boolean
  },
  data() {
    return {
      containerHeight: '35px',
      showCloseAndOpen: false,
      openOrCloseText: '展开',
      showSubmitBtn: false,
      showResetBtn: false,
      eleParms: [],
      handleExpireTime: {
        disabledDate(time) {
          const start = new Date()
          return time.getTime() > start.setMonth(start.getMonth() - 1)
        }
      }
    }
  },
  created() {
    this.showSubmitBtn = this.$listeners.submit
    this.showResetBtn = this.$listeners.reset
    this.eleParms = this.elements.map(item => {
      return {
        key: item.key,
        value: item.value || '',
        defaultValue: item.defaultValue || ''
      }
    })
    // 立即执行
    // if (!this.noimmediate) {
    //   this.submitFormFilter();
    // }
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        this.eleParms = this.elements.map(item => {
          return {
            key: item.key,
            value: item.value || '',
            defaultValue: item.defaultValue || ''
          }
        })
        // 立即执行
        if (!this.noimmediate) {
          this.submitFormFilter()
        }
      })
    }, 100)
    this.initShowCloseOrOpen()
    window.addEventListener('resize', this.initShowCloseOrOpen)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initShowCloseOrOpen)
  },
  methods: {
    handleForceSet(items) {
      // console.log("items", items);
      // 手动清除相关填充值
      for (const key in items) {
        this.eleParms.forEach(item => {
          if (key === item.key) {
            this.$set(item, 'value', items[key])
          }
        })
      }
    },
    handleChangeSelect(value, cb) {
      cb && cb(value)
    },
    getParms() {
      const parms = {}
      this.eleParms.forEach(item => {
        if (item.value) {
          parms[item.key] = item.value || item.defaultValue || ''
        }
      })
      return parms
    },
    initShowCloseOrOpen() {
      if (this.$refs['input-container']) {
        this.showCloseAndOpen = this.$refs['input-container'].scrollHeight > 35
      }
    },
    reset() {
      if (!this.hand) {
        this.eleParms.forEach(item => {
          item.value = item.defaultValue ? item.defaultValue : ''
        })
        this.submitFormFilter()
        this.$emit('reset', this.getParms())
      } else {
        // 手动设置输入框
        this.$emit('reset', this.eleParms)
      }
    },
    submitFormFilter() {
      this.$emit('submit', this.getParms())
    },
    openAndCloseFilterForm() {
      this.containerHeight = this.openOrCloseText === '展开' ? 'auto' : '35px'
      this.openOrCloseText = this.openOrCloseText === '展开' ? '收起' : '展开'
    }
  }
}
</script>
<style lang="less" scoped>
@import url('@/assets/varibles.less');
.ck-filter-form {
  display: flex;
  overflow: hidden;
  .form-item-container {
    justify-content: flex-start;
    flex-grow: 1;
    .form-item {
      float: left;
      display: flex;
      align-items: center;
      margin: 3px;
      margin-right: 15px;
      .form-item-label {
        color: #555555;
        text-align: right;
        white-space: nowrap;
      }
    }
  }
  .right-btn-container {
    display: flex;
    text-align: center;
    padding-top: 5px;
    button {
      margin: 0px 5px;
      height: 27px;
      margin-top: -1px;
      padding: 7px 15px;
      display: flex;
      align-items: center;
      font-weight: 400;
    }
    .more-text {
      width: 45px;
      margin-top: 3px;
      color: @themColor;
      cursor: pointer;
      user-select: none;
    }
    :deep(button) {
      padding: 7px 15px;
      margin-top: -1px;
      height: 27px;
      display: flex;
      align-items: center;
      font-weight: 400;
    }
  }
}
:deep(.el-date-editor) {
  width: 200px !important;
  .el-range-separator {
    width: auto;
  }
}
</style>
